[cmdk-root] {
  @apply p-2 bg-background-secondary/95 dark:border backdrop-blur-xs fixed left-1/2 top-1/3 z-50 -translate-x-1/2 -translate-y-1/2 shadow-md max-w-[640px] w-full overflow-hidden rounded-lg;
}

[cmdk-input] {
  @apply bg-transparent border-b mb-2 rounded-b-none px-3 py-2 text-sm block rounded-sm placeholder:text-content-tertiary border-0 w-full focus:outline-hidden;
}

[cmdk-overlay] {
  @apply fixed inset-0 z-40 bg-black/25;
}

[cmdk-item] {
  content-visibility: auto;

  @apply rounded-sm text-sm flex items-center gap-1 p-2 cursor-pointer;

  &[data-selected="true"]:not([data-button]) {
    @apply bg-background-tertiary;
  }

  &[data-disabled="true"] {
    @apply text-content-tertiary cursor-not-allowed;
  }

  &[data-button] {
    @apply text-xs;
    &[data-selected="true"] {
      @apply bg-background-primary;
    }
  }

  &:active {
    @apply bg-background-tertiary;
  }

  & + [cmdk-item] {
    margin-top: 4px;
  }

  svg {
    width: 18px;
    height: 18px;
  }
}

[cmdk-list] {
  @apply h-[330px] overflow-auto overscroll-contain transition-[height] duration-100 ease-[ease] focus:outline-hidden;
}

[cmdk-separator] {
  @apply h-px w-full my-1 bg-border-transparent;
}

*:not([hidden]) + [cmdk-group] {
  @apply mt-2;
}

[cmdk-group-heading] {
  @apply select-none text-xs text-content-tertiary p-2 py-1 flex items-center sticky top-0;
}

[cmdk-empty] {
  @apply text-sm flex items-center justify-center h-12 whitespace-pre-wrap text-content-tertiary;
}
